import { MinusCircleOutlined } from '@ant-design/icons-vue'
import {
  Button,
  Checkbox,
  CheckboxGroup,
  Form,
  FormItem,
  Image,
  Input,
  InputNumber,
  message,
  Radio,
  RadioGroup,
  Select,
  SelectOption,
  Space,
  Spin,
  Tag
} from 'ant-design-vue'
import { defineComponent, onMounted, reactive, Ref, ref } from 'vue'
import { useRoute } from 'vue-router'

import aiTestSkinApi from '@/apis/aiTestSkinApi'
import { addProductItem, productItemConfig } from '@/apis/aiTestSkinTypes'
import UploadFile from '@/components/UploadFile'
import { useBack } from '@/hooks'
import { isValueEmpty } from '@/utils'

export default defineComponent({
  name: 'ProductConfigEdit',
  setup() {
    const addProductCur = ref({} as addProductItem)
    const selectGoodsRef = ref({} as any)
    const goodsData = ref([] as any)
    const loading = ref(false)
    const deleteVisible = ref(false)
    const route = useRoute()
    const id = ref(route.query.id)
    const showExpressDlg = ref(false)
    const { handleCancel } = useBack('refreshFormationList')
    const data = ref({} as productItemConfig)
    const productInfo = ref({
      degreeOfMatching: '',
      featureLabel: '',
      jumpLink: '',
      matchingRule: '',
      originalId: '',
      productName: '',
      productPictureUrl: '',
      suitableForCroud: 1
    } as FormRules)

    //编辑详情详情
    async function getDetail() {
      if (id.value) {
        loading.value = true
        try {
          data.value = await aiTestSkinApi.editProductConfig(route.query.id)
        } finally {
          loading.value = false
        }
      } else {
        data.value = {
          degreeOfMatching: '',
          featureLabel: '',
          jumpLink: '',
          matchingRule: '',
          originalId: '',
          productName: '',
          productPictureUrl: '',
          suitableForCroud: ''
        }
      }
    }

    //保存或编辑
    async function handleConfirm() {
      //数据校验
      if (isValueEmpty(data.value.productName)) {
        console.log(data.value.productName, 'data.value.productName')
        message.error('商品名称不能为空')
        return
      }
      if (isValueEmpty(data.value.productPictureUrl)) {
        message.error('商品图片不能为空')
        return
      }
      if (isValueEmpty(data.value.suitableForCroud)) {
        message.error('适合人群不能为空')
        return
      }
      if (isValueEmpty(data.value.matchingRule)) {
        message.error('匹配规则不能为空')
        return
      }
      if (id.value) {
        //编辑
        try {
          await aiTestSkinApi
            .editUpdateProduct({
              id: data.value.id,
              productName: (addProductCur.value.productName =
                data.value.productName),
              jumpLink: (addProductCur.value.jumpLink = data.value.jumpLink),
              productPictureUrl: (addProductCur.value.productPictureUrl =
                data.value.productPictureUrl),
              suitableForCroud: (addProductCur.value.productPictureUrl =
                data.value.suitableForCroud),
              matchingRule: (addProductCur.value.matchingRule =
                data.value.matchingRule),
              originalId: (addProductCur.value.originalId =
                data.value.originalId),
              degreeOfMatching: (addProductCur.value.degreeOfMatching =
                data.value.degreeOfMatching),
              featureLabel: (addProductCur.value.featureLabel = tags.join(','))
            })
            .then(() => {
              message.success('编辑成功')
              handleCancel()
            })
          console.log(addProductCur.value.productName, 'productName')
        } finally {
        }
      } else {
        //新增
        try {
          await aiTestSkinApi
            .getAddProduct({
              degreeOfMatching: data.value.degreeOfMatching,
              featureLabel: tags.join(','), // 将特色标签连接成一个字符串
              jumpLink: data.value.jumpLink,
              matchingRule: data.value.matchingRule,
              originalId: data.value.originalId,
              productName: data.value.productName,
              productPictureUrl: data.value.productPictureUrl,
              suitableForCroud: data.value.suitableForCroud
            })
            .then(() => {
              console.log(data.value, 'data')
              message.success('保存成功')
              handleCancel()
            })
        } finally {
        }
      }
    }
    function cancel() {
      handleCancel()
    }
    // const inputText = ref('')
    const tags = reactive([]) // 标签列表
    // 新增标签
    function addTag() {
      if (data.value.featureLabel.trim() !== '') {
        if (tags.length < 3 && data.value.featureLabel.trim().length <= 6) {
          tags.push(data.value.featureLabel.trim())
          data.value.featureLabel = ''
        } else {
          if (tags.length >= 3) {
            message.error('标签数量不能超过3个')
          }
          if (data.value.featureLabel.trim().length > 6) {
            message.error('字数长度不能超过6个字')
          }
        }
      }
    }
    // 删除标签
    function handleClose(index) {
      tags.splice(index, 1)
    }
    const renderDegreeOfMatchingOptions = () => {
      if (
        data.value.matchingRule === '黑头' ||
        data.value.matchingRule === '痘痘' ||
        data.value.matchingRule === '毛孔' ||
        data.value.matchingRule === '粗糙度' ||
        data.value.matchingRule === '斑点' ||
        data.value.matchingRule === '皱纹'
      ) {
        return (
          <>
            <SelectOption value="严重">严重</SelectOption>
            <SelectOption value="中度">中度</SelectOption>
            <SelectOption value="轻度">轻度</SelectOption>
            <SelectOption value="无">无</SelectOption>
          </>
        )
      } else if (data.value.matchingRule === '黑眼圈') {
        return (
          <>
            <SelectOption value="混合型">混合型</SelectOption>
            <SelectOption value="色素性">色素性</SelectOption>
            <SelectOption value="血管型">血管型</SelectOption>
            <SelectOption value="阴影型">阴影型</SelectOption>
            <SelectOption value="无">无</SelectOption>
          </>
        )
      } else if (data.value.matchingRule === '肤质') {
        return (
          <>
            <SelectOption value="中性偏干">中性偏干</SelectOption>
            <SelectOption value="中性偏油">中性偏油</SelectOption>
            <SelectOption value="干性">干性</SelectOption>
            <SelectOption value="中性">中性</SelectOption>
            <SelectOption value="油性">油性</SelectOption>
          </>
        )
      } else if (data.value.matchingRule === '敏感性') {
        return (
          <>
            <SelectOption value="敏感">敏感</SelectOption>
            <SelectOption value="正常">正常</SelectOption>
            <SelectOption value="耐受">耐受</SelectOption>
          </>
        )
      } else if (
        data.value.matchingRule === '皮炎' ||
        data.value.matchingRule === '眼角纹' ||
        data.value.matchingRule === '鱼尾纹'
      ) {
        return (
          <>
            <SelectOption value="有">有</SelectOption>
            <SelectOption value="无">无</SelectOption>
          </>
        )
      }
    }

    onMounted(() => {
      getDetail()
    })
    return {
      goodsData,
      selectGoodsRef,
      showExpressDlg,
      // expressInfo,
      loading,
      deleteVisible,
      tags,
      // inputText,
      addProductCur,
      productInfo,
      data,
      renderDegreeOfMatchingOptions,
      handleClose,
      addTag,
      cancel,
      handleCancel,
      getDetail,
      handleConfirm
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Form labelCol={{ span: 2 }}>
          <FormItem
            label="商品名称:"
            rules={this.productInfo.productName}
            required
          >
            <Input
              v-model:value={this.data.productName}
              style={{ width: '300px', marginLeft: '10px' }}
            ></Input>
          </FormItem>
          <FormItem label="商品链接">
            <div style={{ marginBottom: '25px' }}>
              {'小程序原始ID'}
              <Input
                rules={this.productInfo.originalId}
                v-model:value={this.data.originalId}
                style={{ width: '300px', marginLeft: '10px' }}
              ></Input>
            </div>
            <div>
              {'小程序跳转地址'}
              <Input
                rules={this.productInfo.jumpLink}
                v-model:value={this.data.jumpLink}
                style={{ width: '400px', marginLeft: '10px' }}
              ></Input>
            </div>
          </FormItem>
          <FormItem
            label="商品图片:"
            rules={this.productInfo.productPictureUrl}
            required
          >
            <div style={{ marginLeft: '10px' }}>
              <UploadFile v-model={[this.data.productPictureUrl, 'urls']}>
                上传图片
              </UploadFile>
              {
                '提示：请上传图片大小为1：1的png或jpg图片，仅支持上传一张，多次上传替换'
              }
            </div>
          </FormItem>
          <FormItem
            label="适合人群"
            rules={this.productInfo.suitableForCroud}
            required
          >
            <RadioGroup v-model:value={this.data.suitableForCroud}>
              <Radio value="1">男</Radio>
              <Radio value="0">女</Radio>
              <Radio value="2">所有</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem
            label="匹配规则"
            rules={this.productInfo.matchingRule}
            required
          >
            <Space>
              <Select
                v-model:value={this.data.matchingRule}
                style={{ width: '120px' }}
                placeholder="黑头"
                allowClear={true}
              >
                <SelectOption value="黑头">黑头</SelectOption>
                <SelectOption value="黑眼圈">黑眼圈</SelectOption>
                <SelectOption value="痘痘">痘痘</SelectOption>
                <SelectOption value="毛孔">毛孔</SelectOption>
                <SelectOption value="粗糙度">粗糙度</SelectOption>
                <SelectOption value="敏感性">敏感性</SelectOption>
                <SelectOption value="肤质">肤质</SelectOption>
                <SelectOption value="斑点">斑点</SelectOption>
                <SelectOption value="皱纹">皱纹</SelectOption>
                <SelectOption value="皮炎">皮炎</SelectOption>
                <SelectOption value="眼角纹">眼角纹</SelectOption>
                <SelectOption value="鱼尾纹">鱼尾纹</SelectOption>
              </Select>
              <div>
                {'匹配程度'}
                <Select
                  v-model:value={this.data.degreeOfMatching}
                  rules={this.productInfo.degreeOfMatching}
                  style={{ width: '120px', marginLeft: '10px' }}
                  // placeholder="严重"
                >
                  {this.renderDegreeOfMatchingOptions()}
                </Select>
              </div>
            </Space>
          </FormItem>
          <div>
            <div style={{ marginLeft: '60px' }}>
              {'特色标签'}
              <Input
                style={{ width: '200px', marginLeft: '10px' }}
                type="text"
                placeholder="请输入文字"
                v-model:value={this.data.featureLabel}
              />
              <Button
                type="primary"
                style={{ marginLeft: '10px' }}
                onClick={this.addTag}
              >
                新增
              </Button>
            </div>
            <div style={{ marginTop: '10px' }}>
              <div style={{ marginLeft: '125px' }}>
                {this.tags.map((item, index) => {
                  return (
                    <Tag
                      color={'pink'}
                      key={index}
                      closable
                      onClose={() => this.handleClose(index)}
                    >
                      {item}
                    </Tag>
                  )
                })}
              </div>
            </div>
          </div>
          <FormItem
            style={{
              marginLeft: '200px',
              marginTop: '30px',
              marginBottom: '50px'
            }}
          >
            <Button
              style={{ width: '200px', height: '45px', marginRight: '100px' }}
              onClick={this.cancel}
            >
              取消
            </Button>
            <Button
              type="primary"
              style={{ width: '200px', height: '45px' }}
              onClick={this.handleConfirm}
            >
              保存
            </Button>
          </FormItem>
        </Form>
      </Spin>
    )
  }
})
